import React, { Component } from 'react';
import { Form, Row, Col } from 'antd';
import ShowType from '../../../routes/common/showType';
import styles from '../../../index.less';

const FormItem = Form.Item;
class TabProbablyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      sTabId: props.app.currentPane.key, /* 当前标签 */
      componentName: props.componentName, /* 组件名 */
      masterConfig: props.masterConfig, /* 配置 */
      sId: props.sId, /* 业务数据Id */
      dataList: props.dataSet, /* 数据 */
      sActiveId: props.sActiveId, /* 窗体Id */
      disabled: props.disabled, /* 是否是查看状态 */
      sContacts: '', /* 联系人 */
      sPhone1: '', /* 电话1 */
      sPhone2: '', /* 电话2 */
      sMobile: '', /* 手机 */
      sEmail: '', /* Email */
      sFax: '', /* 传真 */
      sMemo: '', /* 备注 */
      sPurchaseManId: '', /* 采购员 */
      sCorporate: '', /* 公司法人 */
      dRegisterCapital: '', /* 注册资金 */
      sCompanyAddress: '', /* 公司地址 */
      sUrl: '', /* 公司网址 */
      cProCityArea: [], /* 省市区-伪字段 */
      // contactData: props.contactData, /* 联系人表 */
      addressData: props.addressData, /* 地址表 */
    };
  }

  componentWillMount() {
    /* 获取主表数据 */
    const { masterConfig, sId } = this.state;
    if (masterConfig.gdsconfigformslave !== undefined) {
      const mainConfig = masterConfig.gdsconfigformslave;
      this.setState({
        sId: sId !== undefined ? sId : '',
        sContacts: mainConfig.filter(item => (item.sName.toLowerCase() === 'scontacts'))[0],
        sPhone1: mainConfig.filter(item => (item.sName.toLowerCase() === 'sphone1'))[0],
        sPhone2: mainConfig.filter(item => (item.sName.toLowerCase() === 'sphone2'))[0],
        sMobile: mainConfig.filter(item => (item.sName.toLowerCase() === 'smobile'))[0],
        sEmail: mainConfig.filter(item => (item.sName.toLowerCase() === 'semail'))[0],
        sFax: mainConfig.filter(item => (item.sName.toLowerCase() === 'sfax'))[0],
        sMemo: mainConfig.filter(item => (item.sName.toLowerCase() === 'smemo'))[0],
        sPurchaseManId: mainConfig.filter(item => (item.sName.toLowerCase() === 'spurchasemanid'))[0],
        sCorporate: mainConfig.filter(item => (item.sName.toLowerCase() === 'scorporate'))[0],
        dRegisterCapital: mainConfig.filter(item => (item.sName.toLowerCase() === 'dregistercapital'))[0],
        sCompanyAddress: mainConfig.filter(item => (item.sName.toLowerCase() === 'scompanyaddress'))[0],
        sUrl: mainConfig.filter(item => (item.sName.toLowerCase() === 'surl'))[0],
        cProCityArea: mainConfig.filter(item => (item.sName.toLowerCase() === 'cprocityarea'))[0],
      });
    }
  }

  componentWillReceiveProps(nextProps) {
    const {
      disabled, dataSet, addressData,
    } = nextProps;
    this.setState({
      disabled, dataList: dataSet, addressData,
    });
  }

  shouldComponentUpdate(nextProps, nextState) {
    const { componentName } = nextProps;
    const { sId } = this.props;
    if (sId === undefined) {
      return true;
    }
    let flag = true;
    if (nextState.disabled !== this.state.disabled) {
      return true;
    }
    if (this.state.sTabId === nextProps.app.currentPane.key && this.state.componentName === componentName) {
      flag = true;
    } else {
      flag = false;
    }
    return flag;
  }

  render() {
    const {
      app, form, handleModalPane, dataName, dataType, handleSelectChange, onClose,
    } = this.props;
    const {
      dataList, sId, sActiveId, disabled, /* contactData, */ addressData,
    } = this.state;
    const childProps = {
      app, form, sActiveId, dataList, sId, disabled, handleModalPane, dataName, dataType, handleSelectChange, onClose,
    };
    const {
      sContacts, sPhone1, sPhone2, sMobile, sEmail, sFax, sMemo,
    } = this.state;
    const {
      sPurchaseManId, sCorporate, dRegisterCapital, sCompanyAddress, sUrl, cProCityArea,
    } = this.state;
    const sContactsProps = { showConfig: sContacts, ...childProps };
    const sPhone1Props = { showConfig: sPhone1, ...childProps };
    const sPhone2Props = { showConfig: sPhone2, ...childProps };
    const sMobileProps = { showConfig: sMobile, ...childProps };
    const sEmailProps = { showConfig: sEmail, ...childProps };
    const sFaxProps = { showConfig: sFax, ...childProps };
    const sMemoProps = { showConfig: sMemo, ...childProps };
    const sPurchaseManIdProps = { showConfig: sPurchaseManId, ...childProps };
    const sCorporateProps = { showConfig: sCorporate, ...childProps };
    const dRegisterCapitalProps = { showConfig: dRegisterCapital, ...childProps };
    const sCompanyAddressProps = { showConfig: sCompanyAddress, ...childProps };
    const cProCityAreaProps = { showConfig: cProCityArea, ...childProps };
    const sUrlProps = { showConfig: sUrl, ...childProps };
    return (
      <FormItem className={styles.searchSlaveForm}>
        <Row type="flex">
          <Col
            span={6}
            order={sContacts.iOrder > 24 ? 24 : sContacts.iOrder}
            style={{ display: sContacts.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="sContacts" showDefaultName="联系人" {...sContactsProps} /* specific={contactData} */ />
          </Col>
          <Col
            span={6}
            order={sPhone1.iOrder > 24 ? 24 : sPhone1.iOrder}
            style={{ display: sPhone1.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="sPhone1" showDefaultName="电话1" {...sPhone1Props} />
          </Col>
          <Col
            span={6}
            order={sPhone2.iOrder > 24 ? 24 : sPhone2.iOrder}
            style={{ display: sPhone2.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="sPhone2" showDefaultName="电话2" {...sPhone2Props} />
          </Col>
          <Col
            span={6}
            order={sMobile.iOrder > 24 ? 24 : sMobile.iOrder}
            style={{ display: sMobile.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="sFax" showDefaultName="手机" {...sMobileProps} />
          </Col>
          <Col
            span={6}
            order={sEmail.iOrder > 24 ? 24 : sEmail.iOrder}
            style={{ display: sEmail.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="sEmail" showDefaultName="Email" {...sEmailProps} />
          </Col>
          <Col
            span={6}
            order={sFax.iOrder > 24 ? 24 : sFax.iOrder}
            style={{ display: sFax.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="sFax" showDefaultName="传真" {...sFaxProps} />
          </Col>
          <Col
            span={6}
            order={sMemo.iOrder > 24 ? 24 : sMemo.iOrder}
            style={{ display: sMemo.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="sMemo" textArea showDefaultName="备注" {...sMemoProps} />
          </Col>
          <Col
            span={6}
            order={sPurchaseManId.iOrder > 24 ? 24 : sPurchaseManId.iOrder}
            style={{ display: sPurchaseManId.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="sPurchaseManId" showDefaultName="采购员" {...sPurchaseManIdProps} />
          </Col>
          <Col
            span={6}
            order={sCorporate.iOrder > 24 ? 24 : sCorporate.iOrder}
            style={{ display: sCorporate.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="sCorporate" showDefaultName="公司法人" {...sCorporateProps} />
          </Col>
          <Col
            span={6}
            order={dRegisterCapital.iOrder > 24 ? 24 : dRegisterCapital.iOrder}
            style={{ display: dRegisterCapital.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="dRegisterCapital" showDefaultName="注册资金" {...dRegisterCapitalProps} />
          </Col>
          <Col
            span={6}
            order={sUrl.iOrder > 24 ? 24 : sUrl.iOrder}
            style={{ display: sUrl.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="sUrl" showDefaultName="公司网址" {...sUrlProps} />
          </Col>
          <Col
            span={6}
            order={sCompanyAddress.iOrder > 24 ? 24 : sCompanyAddress.iOrder}
            style={{ display: sCompanyAddress.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="sCompanyAddress" showDefaultName="公司地址" {...sCompanyAddressProps} specific={addressData} />
          </Col>
          <Col
            span={6}
            order={cProCityArea.iOrder > 24 ? 24 : cProCityArea.iOrder}
            style={{ display: cProCityArea.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="cProCityArea" showDefaultName="省市区" {...cProCityAreaProps} />
          </Col>
        </Row>
      </FormItem>
    );
  }
}

export default TabProbablyComponent;
